const path = require('path');
const uglify = require('uglifyjs-webpack-plugin');
const htmlPlugin= require('html-webpack-plugin');

module.exports={
    //入口文件的配置项
    entry:{
        entry:path.resolve(__dirname, './src/index.js'),
    },
    //出口文件的配置项y
    output:{
        //输出的路径，用了Node语法
        path:path.resolve(__dirname,'./dist'),
        //输出的文件名称
        filename:'bundle.js',
        // publicPath:path.resolve(__dirname,'dist')
    },
    //模块：例如解读CSS,图片如何转换，压缩
    module:{
      rules: [
            { test: /\.js|jsx$/,loader: "babel-loader",query: {presets: ['es2015','react']},exclude:/node_modules/},
            {test: /.css$/, use: ['style-loader', 'css-loader']},/*解析css, 并把css添加到html的style标签里*/
            //{test: /.css$/, use: ExtractTextPlugin.extract({fallback: 'style-loader',use: 'css-loader'})},/*解析css, 并把css变成文件通过link标签引入*/
            {test: /.(jpg|png|gif|svg)$/, use: ['url-loader?limit=8192&name=./[name].[ext]']},/*解析图片*/
            {test: /.less$/, use: ['style-loader', 'css-loader', 'less-loader']}/*解析less, 把less解析成浏览器可以识别的css语言*/
        ]
    },
    //插件，用于生产模版和各项功能
    plugins:[
        new uglify(),
         new htmlPlugin({
            minify:{
                removeAttributeQuotes:true
            },
            hash:true,
            template:'./src/index.html'         
        }),
    ],
    //配置webpack开发服务功能
    devServer:{
         //设置基本目录结构
        contentBase:path.resolve(__dirname,'dist'),
        //服务器的IP地址，可以使用IP也可以使用localhost
        host:'localhost',
        //服务端压缩是否开启
        compress:true,
        //配置服务端口号
        port:1717
    }
}